<template>
  <dialog ref="videoDialog" style="width: 300px;height: 200px">
    <video ref="videoPlayer" controls></video>

      <div class="dialog-footer">
        <el-button type="primary" @click="closeVideoDialog" >Close</el-button>
      </div>

  </dialog>

  <div>
    <div class="loginPart">
      <el-input v-model="searchName"  placeholder="Search by name" style="margin-bottom: 20px;"></el-input>
      <el-table :data="numberedFilteredList" stripe height="490" style="width: 100%;"  :default-sort="{ prop: 'time', order: 'descending' }">
        <el-table-column prop="time" label="Time" sortable></el-table-column>
        <el-table-column prop="camera_id" label="Camera ID"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button @click="toggleEditMode(scope.$index)">查看监控视频</el-button>
          </template>
        </el-table-column>
      </el-table>
<!--      <input v-model="searchName" placeholder="Search by name" type="text" />-->
<!--      <div class="table">-->

<!--        <table>-->
<!--          <thead>-->
<!--          <tr>-->
<!--            <th>camera_id</th>-->
<!--            <th>time</th>-->
<!--            <th>操作</th>-->
<!--          </tr>-->
<!--          </thead>-->
<!--          <tbody>-->
<!--          <tr v-for="(item, index) in numberedFilteredList" :key="index">-->
<!--            <td >{{ item.camera_id }}</td>-->

<!--            <td >{{ item.time }}</td>-->

<!--            <td>-->
<!--              <button  @click="toggleEditMode(index)">-->
<!--                查看监控视频-->
<!--              </button>-->
<!--            </td>-->
<!--          </tr>-->
<!--          </tbody>-->
<!--        </table>-->
<!--      </div>-->

    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
import { showMonitorList } from "@/api/history";

const videoDialog = ref<HTMLElement|null>(null);
const videoPlayer = ref<HTMLVideoElement|null>(null);
const list = ref([]);

const fetchData = async () => {
  try {
    const response = await showMonitorList();
    list.value = response.data.list.map(item => ({
      ...item,
      alarm: reactive({
        camera_id: item.camera_id,
        time: item.time,
        video: item.video,
      }),
    }));
  } catch (error) {
    console.error(error);
  }
};

const searchInput = ref("");
fetchData();

const filteredUsers = computed(() => {
  return list.value.filter(user => user.fields.time.includes(searchInput.value));
});

const searchName = ref("");
const filteredList = computed(() => {
  if (searchName.value === "") {
    return list.value;
  } else {
    return list.value.filter(item =>
        item.type.toLowerCase().includes(searchName.value.toLowerCase())
    );
  }
});

const numberedFilteredList = computed(() => {
  return filteredList.value.map((item, index) => ({
    ...item,
    index: index + 1,
  }));
});

import { nextTick } from 'vue';

// ...

function toggleEditMode(index: number) {
  const item = list.value[index];
  let addr = item.video.replace('C:/Users/26368/Desktop/djangoProject1/algorithm/data/', 'http://localhost:8899/videos/');

  // Set the video source
  videoPlayer.value!.src = addr;

  // Open the video dialog
  videoDialog.value!.showModal();

  // Wait for the next DOM update cycle
  nextTick(() => {
    // Add an event listener to play the video when it can be played through
    videoPlayer.value!.oncanplaythrough = function() {
      // Play the video
      videoPlayer.value!.play();
    }
  });
}



function closeVideoDialog() {
  // Stop the video
  videoPlayer.value!.pause();
  videoPlayer.value!.currentTime = 0;

  // Close the video dialog
  videoDialog.value!.close();
}
</script>

<style scoped>
.loginPart {
  width: 80%;
  margin: 40px auto;
  padding: 40px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
.table-container {
  width: 100%;
  margin: 0 auto;
}

.dialog-footer {
  padding-left: 220px;
  margin-top: 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
  background-color: #f2f2f2;
}

th,
td {
  padding: 10px;
  text-align: left;
}

th {
  background-color: #3498db;
  color: white;
}

td input[type="text"],
td input[type="number"],
td select {
  width: 100%;
  padding: 5px;
  border: none;
  border-radius: 3px;
  background-color: #eaf8ff;
}

td input[type="text"]:disabled,
td input[type="number"]:disabled,
td select:disabled {
  background-color: #f2f2f2;
}
</style>
